<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"      
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <head>
        <title>Message Manager</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ui:composition template="com.template/AdminTemplate.xhtml">
            <ui:define name="page-content"> 
                <br/>
                <div class="row">                    
                    <div class="col-xs-12">
                        <!-- /.panel -->
                        <div class="chat-panel panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-comments fa-fw"></i>
                                Chat box:
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <ul class="chat">
                                    <c:choose>
                                        <c:when test="#{notificationManager.chatbox != null}">
                                            <c:forEach var="i" items="#{notificationManager.chatbox}">
                                                <li class="left clearfix">                                        
                                                    <div class="chat-body clearfix">
                                                        <div class="header">
                                                            <span class=" text-primary"><i class="fa fa-user fa-fw"></i><strong class="primary-font">#{i.sender} said:</strong></span> 
                                                            <small class="pull-right text-muted">
                                                                <i class="fa fa-clock-o fa-fw"></i>#{i.timesent}
                                                            </small>
                                                        </div>
                                                        <p>
                                                            #{i.content} contetn
                                                        </p>
                                                    </div>
                                                </li>  
                                            </c:forEach>
                                        </c:when>
                                        <c:otherwise>
                                            <li class="divider"></li>
                                        </c:otherwise>
                                    </c:choose>
                                </ul>
                            </div>
                            <!-- /.panel-body -->
                            <div class="panel-footer">
                                <div class="input-group">
                                    <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                                    <span class="input-group-btn">
                                        <button class="btn btn-warning btn-sm" id="btn-chat" disabled="true">
                                            Send
                                        </button>
                                    </span>
                                </div>
                            </div>
                            <!-- /.panel-footer -->
                        </div>
                        <!-- /.panel .chat-panel -->
                    </div>
                </div>
            </ui:define>
        </ui:composition>
    </body>
</html>
